<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0" />
	<link rel="icon" href="/favicon.ico" />
	<title>Template UI</title>
	<script type="text/javascript">
		document.write("<script src='config.js?" + new Date().getTime() + "'><\/script>")
	</script>
</head>

<body>
	<noscript>
		<strong>We're sorry but SCUI doesn't work properly without JavaScript enabled. Please enable it to
			continue.</strong>
	</noscript>
	<script type="text/javascript">
		var dark = window.localStorage.getItem('APP_DARK')
		if (dark) {
			document.documentElement.classList.add('dark')
		}
	</script>
	<div id="app" class="aminui">
		<div class="app-loading">
			<!-- <div class="app-loading__logo">
					<img src="/img/loading.gif" />
				</div> -->
			<div class="wrap">
				<div class="round"> </div>
				<div class="round"></div>
				<div class="round"></div>
				<div class="round"></div>
				<div class="round"></div>
				<div class="round"></div>
				<div class="round"></div>
				<!-- <div>华润39</div> -->
				<div class="app-loading__logo">
					<img src="/img/logo.png" />
				</div>
			</div>
		</div>

		<style>
			/* .app-loading{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        } */
			.wrap {
				/* margin: 120px 0 0 0; */
				width: 100px;
				height: 100px;
				position: relative;
				/* border: 1px solid #e9e9e9; */
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.round {
				position: absolute;
				width: 14px;
				height: 14px;
				border-radius: 50%;
				top: -28px;
				background-color: #536DFE;
				/* 加上动画效果 */
				animation: circleRound 1.5s linear infinite;
				/* 设置旋转中心，搭配.wrap的border看 */
				transform-origin: 50% 70px;
			}

			/* 注意z-index层级关系，依次递减 */
			.round:nth-child(1) {
				z-index: 7;
			}

			/* 注意动画延后animation-delay播放，依次递增 */
			/* 至于小圆球则越来越小 */
			.round:nth-child(2) {
				height: 12px;
				width: 12px;
				background-color: #536DFE;
				animation-delay: .2s;
				z-index: 6;
			}

			.round:nth-child(3) {
				height: 11px;
				width: 11px;
				background-color: rgb(22, 123, 234);
				animation-delay: .4s;
				z-index: 5;
			}

			.round:nth-child(4) {
				height: 10px;
				width: 10px;
				background-color: #536DFE;
				animation-delay: .6s;
				z-index: 4;
			}

			.round:nth-child(5) {
				height: 9px;
				width: 9px;
				background-color: #536DFE;
				animation-delay: .8s;
				z-index: 3;
			}

			.round:nth-child(6) {
				height: 8px;
				width: 8px;
				background-color: #536DFE;
				animation-delay: 1s;
				z-index: 2;
			}

			.round:nth-child(7) {
				height: 7px;
				width: 7px;
				background-color: #536DFE;
				animation-delay: 1.2s;
				z-index: 1;
			}

			@keyframes circleRound {
				to {
					transform: rotate(1turn);
				}
			}
		</style>
		<style>
			.app-loading {
				position: absolute;
				top: 0px;
				left: 0px;
				right: 0px;
				bottom: 0px;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				background: #fff;
			}

			.app-loading__logo {
				margin-bottom: 30px;
			}

			.app-loading__logo img {
				width: 60px;
				height: 60px;
				vertical-align: bottom;
			}

			.app-loading__loader {
				box-sizing: border-box;
				width: 35px;
				height: 35px;
				border: 5px solid transparent;
				border-top-color: #000;
				border-radius: 50%;
				animation: 0.5s loader linear infinite;
				position: relative;
			}

			.app-loading__loader:before {
				box-sizing: border-box;
				content: '';
				display: block;
				width: inherit;
				height: inherit;
				position: absolute;
				top: -5px;
				left: -5px;
				border: 5px solid #ccc;
				border-radius: 50%;
				opacity: 0.5;
			}

			.app-loading__title {
				font-size: 24px;
				color: #333;
				margin-top: 30px;
			}

			.dark .app-loading {
				background: #222225;
			}

			.dark .app-loading__loader {
				border-top-color: #fff;
			}

			.dark .app-loading__title {
				color: #d0d0d0;
			}

			@keyframes loader {
				0% {
					transform: rotate(0deg);
				}

				100% {
					transform: rotate(360deg);
				}
			}
		</style>
	</div>
	<!-- built files will be auto injected -->
</body>
<div id="versionCheck" style="
			display: none;
			position: absolute;
			z-index: 99;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 40px;
			background: rgba(255, 255, 255, 0.9);
			color: #333;
		">
	<h2 style="line-height: 1; margin: 0; font-size: 24px">当前使用的浏览器内核版本过低 :(</h2>
	<p style="line-height: 1; margin: 0; font-size: 14px; margin-top: 20px; opacity: 0.8">
		当前版本：<span id="versionCheck-type">--</span> <span id="versionCheck-version">--</span>
	</p>
	<p style="line-height: 1; margin: 0; font-size: 14px; margin-top: 10px; opacity: 0.8">
		最低版本要求：Chrome 71+、Firefox 65+、Safari 12+、Edge 97+。
	</p>
	<p style="line-height: 1; margin: 0; font-size: 14px; margin-top: 10px; opacity: 0.8">
		请升级浏览器版本，或更换现代浏览器，如果你使用的是双核浏览器,请切换到极速/高速模式。
	</p>
</div>
<script type="text/javascript">
	function getBrowerInfo() {
		var userAgent = window.navigator.userAgent
		var browerInfo = {
			type: 'unknown',
			version: 'unknown',
			userAgent: userAgent
		}
		if (document.documentMode) {
			browerInfo.type = 'IE'
			browerInfo.version = document.documentMode + ''
		} else if (indexOf(userAgent, 'Firefox')) {
			browerInfo.type = 'Firefox'
			browerInfo.version = userAgent.match(/Firefox\/([\d.]+)/)[1]
		} else if (indexOf(userAgent, 'Opera')) {
			browerInfo.type = 'Opera'
			browerInfo.version = userAgent.match(/Opera\/([\d.]+)/)[1]
		} else if (indexOf(userAgent, 'Edg')) {
			browerInfo.type = 'Edg'
			browerInfo.version = userAgent.match(/Edg\/([\d.]+)/)[1]
		} else if (indexOf(userAgent, 'Chrome')) {
			browerInfo.type = 'Chrome'
			browerInfo.version = userAgent.match(/Chrome\/([\d.]+)/)[1]
		} else if (indexOf(userAgent, 'Safari')) {
			browerInfo.type = 'Safari'
			browerInfo.version = userAgent.match(/Safari\/([\d.]+)/)[1]
		}
		return browerInfo
	}
	function indexOf(userAgent, brower) {
		return userAgent.indexOf(brower) > -1
	}
	function isSatisfyBrower() {
		var minVer = {
			Chrome: 71,
			Firefox: 65,
			Safari: 12,
			Edg: 97,
			IE: 999
		}
		var browerInfo = getBrowerInfo()
		var materVer = browerInfo.version.split('.')[0]
		return materVer >= minVer[browerInfo.type]
	}
	if (!isSatisfyBrower()) {
		document.getElementById('versionCheck').style.display = 'block'
		document.getElementById('versionCheck-type').innerHTML = getBrowerInfo().type
		document.getElementById('versionCheck-version').innerHTML = getBrowerInfo().version
	}
</script>
<script type="module" src="/src/main.js"></script>

</html>
